<template>
	<div class="page">
		<div class="page-content">
			<section class="section-1">
				<div class="banner">
					<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
					<i></i>
				</div>
			</section>
			<section class="section-2">
				<div class="grid">
					<ul>
						<li>
							<!-- <img src="icon iconfont icon-mianfei" alt=""> -->
							<i class="icon iconfont icon-mianfei"></i>
							<p>0元抢</p>
						</li>
						<li>
							<i class="icon iconfont icon-choujiang"></i>
							<p>幸运儿</p>
						</li>
						<li>
							<i class="icon iconfont icon-zhuanzhanghuikuan"></i>
							<p>领现金</p>
						</li>
					</ul>
				</div>
			</section>
			<section class="section-3">
				<div class="notice">
					<div class="notice-icon">
						<i></i>
					</div>
					<div class="notice-line"></div>
					<div class="notice-img">
						<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
					</div>
					<div class="notice-content ellipsis">小聂：确认收到"竹炭纸巾一条共10包，品质非</div>
					<div class="notice-order">
						<span>我的订单</span>
						<i class="icon iconfont icon-right"></i>
					</div>
				</div>
			</section>
			<section class="section-4">
				<div class="goods">
					<div class="goods-header">
						<p>免费抢</p>
						<p>商家赞助</p>
					</div>
					<div class="goods-content">
						<div class="goods-content--item">
							<div class="item-left">
								<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
								<p><i></i><span>6人在看</span></p>
							</div>
							<div class="item-right">
								<div class="item-right--title">
									60包抽纸家用实惠装整箱卫生纸巾面巾餐巾纸抽婴儿原木抽纸巾漫花
								</div>
								<div class="item-right--price">
									<i>￥</i>
									<span>0</span>
									<p>原价:￥9.37</p>
								</div>
								<div class="item-right--num">剩余：15件</div>
								<div class="item-right--paynum">2515人已领</div>
								<div class="item-right--btn" @click="goGoodDetail()">立即抢</div>
							</div>
						</div>
						<div class="goods-content--item">
							<div class="item-left">
								<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
								<p><i></i><span>6人在看</span></p>
							</div>
							<div class="item-right">
								<div class="item-right--title">
									60包抽纸家用实惠装整箱卫生纸巾面巾餐巾纸抽婴儿原木抽纸巾漫花
								</div>
								<div class="item-right--price">
									<i>￥</i>
									<span>0</span>
									<p>原价:￥9.37</p>
								</div>
								<div class="item-right--num">剩余：15件</div>
								<div class="item-right--paynum">2515人已领</div>
								<div class="item-right--btn">立即抢</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Swipe,
		SwipeItem,
		Lazyload
	} from 'vant';

	Vue.use(Swipe);
	Vue.use(SwipeItem);
	Vue.use(Lazyload);
	export default {
		components: {

		},
		data() {
			return {
		
			}
		},

		computed: {

		},
		created() {
			console.log(11111111111);
			this.$http.get(
				'http://api.l.xyou.cn/youyizhuan/web/actVipTips?token=fe52MR4bmqOX3YogpTN5_yMsmDkm7vm9TI3Om1QPbuh5NGbNIDvozRuLbIDCirjNFBkeN_c5Yf4LxylzFqPogLORDV3dCe4bbDNi-ThyNqWQRrm9GQelbYxVTTsIqnE0apvzlJ0u1tO9N6Xv3ok201uXcHqs7pg&vue_ver=1598321328225000'
			).then((res) => {
				console.log(res);
			});
		},
		mounted() {

		},

		methods: {
			goGoodDetail() {
				this.$router.push('/goods/detail');
			}
		}
	};
</script>

<style lang="less" scoped>
	.page {
		width: 100%;
		height: 100%;
		background: #F9F9F9;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.section-1 {
		.banner {
			position: relative;
			width: 375px;
			img {
				width: 100%;
			}
			i {
				width: 375px;
				height: 16px;
				position: absolute;
				bottom: 0;
				left: 0;
				background: url(../../assets/images/index/top.png);
				background-size: 100%;
			}
		}
	}
	.section-2 {
		.grid {
			background: #FFFFFF;

			ul {
				width: 375px;
				height: 87px;
				display: flex;
				align-items: center;
				justify-content: space-around;

				li {
					width: 46px;
					height: 68px;

					img {
						width: 46px;
						height: 46px;
						border-radius: 50%;
					}
					i {
						font-size: 46px;
						color: #F9A09A;
					}
					p {
						text-align: center;
						font-size: 14px;
						color: #666666;
						margin-top: 5px;
					}
				}
			}
		}
	}

	.section-3 {
		.notice {
			width: 355px;
			height: 40px;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 10px ;
			justify-content: space-between;

			.notice-icon {
				width: 20px;
				height: 20px;
				
				i {
					display: block;
					width: 20px;
					height: 20px;
					background: url(../../assets/images/index/notice.png);
					background-size: 100%;
				}
			}

			.notice-line {
				width: 2px;
				height: 20px;
				background-color: #DDDDDD;
				margin: 0 5px;
			}

			.notice-img {
				width: 20px;
				height: 20px;
				margin-right: 5px;

				img {
					width: 20px;
					height: 20px;
				}
			}

			.notice-content {
				width: 200px;
				font-size: 11px;
				color: #666666;
				margin-right: 10px;
			}

			.notice-order {
				width: 70px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.section-4 {
		.goods {
			width: 355px;
			padding: 0 10px ;

			.goods-header {
				width: 345px;
				margin: 0 auto;
				height: 26px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				p {
					&:first-child {
						font-size: 13px;
						color: #666666;
						text-align: left;
					}

					&:last-child {
						font-size: 9px;
						color: #999999;
						text-align: right;
					}
				}
			}

			.goods-content {
				.goods-content--item {
					padding: 5px;
					width: 345px;
					background: #FFFFFF;
					border-radius: 10px;
					display: flex;
					margin-bottom: 5px;

					.item-left {
						width: 138px;
						height: 138px;
						position: relative;

						img {
							width: 138px;
							height: 138px;
							border-radius: 5px;
						}

						p {
							display: flex;
							align-items: center;
							width: 100%;
							position: absolute;
							bottom: 0;
							height: 15px;
							background: rgba(255, 255, 255, 0.8);
							opacity: 0.8;
							border-radius: 0px 0px 5px 5px;
							font-size: 9px;
							color: #FF0000;
							opacity: 1;

							i {
								width: 9px;
								height: 11px;
								background: url(../../assets/images/index/qiang@2x.png);
								background-size: 100%;
								margin:0  5px ;
							}
						}
					}

					.item-right {
						width: 192px;
						height: 130px;
						margin-left: 12px;
						position: relative;

						.item-right--title {
							margin-top: 5px;
							font-size: 11px;
							color: #666666;
						}

						.item-right--price {
							margin-top: 8px;
							i {
								font-size: 12px;
								color: #FF0000;
							}

							span {
								font-size: 18px;
								color: #FF0000;
								margin-left: 9px;
							}

							p {
								display: inline-block;
								font-size: 8px;
								color: #EEEEEE;
								margin-left: 11px;
								text-decoration:line-through;
							}
						}

						.item-right--num {
							margin-top: 13px;
							font-size: 12px;
							color: #FF0000;
						}

						.item-right--paynum {
							margin-top: 24px;
							font-size: 9px;
							color: #999999;
						}

						.item-right--btn {
							position: absolute;
							bottom: 0;
							right: 0;
							width: 60px;
							height: 25px;
							background: #FF0000;
							border-radius: 5px;
							font-size: 12px;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>
